<template>
  <view id="main">
    <view class="head">
      <image class="bg" src="@/static/login/Head.png" />
    </view>
    <view class="content">
      <view class="logo">
        <image class="medium_Icon" src="@/static/login/Logo.png" />
        <view class="title">固废综合管理服务云平台</view>
      </view>
      <view class="text fs_14">{{ islogin ? '账号登录' : '账号注册' }}</view>
      <view class="card">
        <view class="input_box">
          <view class="inner_input">
            <input type="text" placeholder="请输入您的手机号" />
          </view>
          <view class="inner_input">
            <input type="text" placeholder="请输入验证码" />
            <view class="btn_code fs_12 color_blue">获取验证码</view>
          </view>
          <view class="inner_input">
            <input type="" placeholder="您的密码由6-20位数字/字母/符号组成" />
            <image class="mini_Icon" src="@/static/login/eye-open.png" />
            <image class="mini_Icon" src="@/static/login/eye-off.png" />
          </view>
          <view class="inner_input">
            <input type="text" placeholder="请再次输入您的密码" />
          </view>
        </view>
        <view class="agreement flex">
          <label class="radio fs_12 flex">
            <radio style="transform:scale(0.7)" value="r1" checked="true" />
            <view>我已阅读并同意</view>
            <view class="radio_text color_blue">《用户协议》</view>
            <view class="radio_text color_blue">《隐私政策》</view>
          </label>
        </view>
        <view class="btn">
          <zy-btn iconType="arrow-right">
            {{ islogin ? '登录' : '注册' }}
          </zy-btn>
        </view>
        <view class="footer">
          <view class="flex reg fs_12" v-if="!islogin">
            <view>已有账号?</view>
            <view class="color_blue">去登录</view>
          </view>
          <view class="flex login fs_12" v-else>
            <view class="flex">
              <view>还没有账号?</view>
              <view class="color_blue">去注册</view>
            </view>
            <view>忘记密码 ?</view>
          </view>
        </view>
      </view>
    </view>
    <view class="foot">短信验证码登录</view>
  </view>
</template>

<script lang="ts" setup>
const islogin = ref(false)
</script>

<style lang="scss" scoped>
#main {
  position: relative;

  .head {
    position: absolute;
    width: 100vw;
    height: 50vh;
    z-index: 1;

    .bg {
      position: absolute;
      width: 100vw;
      height: 100%;
      z-index: -1;
    }

    .logo {
      // position: absolute;
      // top: 15%;
      // left: 50%;
      // transform: translateX(-50%);
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;

      .title {
        margin: 20px 0;
        text-align: center;
        font-size: 32px;
        color: rgb(238, 238, 238);
        max-width: 60%;
      }
    }
  }

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 100vw;

    .logo {
      // position: absolute;
      // top: 15%;
      // left: 50%;
      // transform: translateX(-50%);
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;

      .title {
        margin: 20px 0;
        text-align: center;
        font-size: 32px;
        color: rgb(238, 238, 238);
        max-width: 60%;
      }
    }

    .text {
      margin-bottom: 20px;
      color: #fff;
      text-align: center;
    }

    .card {
      width: 92%;
      margin: auto;

      .input_box {
        .inner_input {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0;
          border: 1px solid rgb(237, 241, 243);
          border-radius: 10px;
          box-shadow: 0px 1px 2px 0px rgba(228, 229, 231, 0.24);
          /* Primary/0 */
          background: rgb(255, 255, 255);
          padding: 10px;
        }
      }

      .agreement {
        justify-content: center;
      }

      .btn {
        display: flex;
        justify-content: center;
        margin: 10px 0;

        .zk_btn {
          width: 100%;
        }
      }

      .footer {
        color: #7C8190;

        .login {
          justify-content: space-between;
        }

        .reg {
          justify-content: center;
        }
      }
    }
  }

  .foot {
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 12px;
    color: rgb(124, 129, 144);
    text-align: center;
    padding: 10px;
  }
}
</style>
